/**
 * 准备工作
 *  1- 安装  npm i vue-router
 *  2- 引入
 *  3- 模块化 安装  Vue.use(VueRouter)  (注意点)
 *  4- 实例化路由
 *  5- 导出路由  (注意)
 * 具体步骤 (home login)
 *  > 1. 把需要的组件以单文件组件的形式先创建出来
 *  > 2. 按照四个步骤的顺序
 *        入口- 手动
 *        匹配规则-
 *        组件- 引入即可
 *        出口- App.vue 根组件里面
 */

// 0. 引入 Vue
import Vue from 'vue'

// 1. 引入 vue-router
import VueRouter from 'vue-router'

// 1.5 引入子组件
import Login from '../components/login/Login.vue'
import Home from '../components/home/Home.vue'
import Users from '../components/users/Users.vue'
import Roles from '../components/roles/Roles.vue'
import Rights from '../components/rights/Rights.vue'
import Categories from '../components/categories/Categories.vue'
import Goods from '../components/goods/Goods.vue'
import GoodsAdd from '../components/goods-add/GoodsAdd.vue'

// 2. 用vue 安装  路由
Vue.use(VueRouter)

// 3. 实例化路由 + 把路由挂载到vue实例上
const router = new VueRouter({
  routes: [
    { path: '/', redirect: '/login' },
    { path: '/login', component: Login },
    {
      path: '/home',
      component: Home,
      children: [
        { path: '/users/:page?', component: Users },
        { path: '/roles', component: Roles },
        { path: '/rights', component: Rights },
        { path: '/categories', component: Categories },
        { path: '/goods', component: Goods },
        { path: '/goods-add', component: GoodsAdd }
      ]
    }
  ]
})

// 导航 守卫 :  拦截
// 参数1 : to : 即将要跳转的 路由对象  $route
// 参数2 : from , 从哪里来的  路由对象
// 参数3 : next()   下一步
router.beforeEach((to, from, next) => {
  // console.log(to.path)
  // 1. 判断访问的是不是login
  if (to.path === '/login') {
    next()
  } else {
    // 其他页面
    // 2.判断是否登录过
    let token = localStorage.getItem('token')
    if (token) {
      // 登录过
      next()
    } else {
      // 没有登录过
      next('/login')
    }
  }
})

// 4. 导出 路由
export default router
